<!DOCTYPE html>
<!-- Copyright (C) 2020  Matthew "strager" Glazar -->
<!-- See end of file for extended copyright information. -->
<html>
  <head>
    <%- await include("./common-head.ejs.html") %>
    <title>quick-lint-js: find JavaScript bugs</title>
    <meta
      name="description"
      content="quick-lint-js gives you instant feedback as you code. Find bugs in your JavaScript before your finger leaves the keyboard."
    />
    <link href="main.css" rel="stylesheet" />
    <style>
      .feature-comparison table {
        border-collapse: collapse;
        width: 100%;
      }
      .feature-comparison td,
      .feature-comparison th {
        border-color: #888888;
        border-style: solid;
        border-width: 0;
        padding: 0.5em 1em;
        text-align: center;
      }
      .feature-comparison th:first-child {
        text-align: right;
      }
      .feature-comparison tbody td,
      .feature-comparison tbody th {
        border-top-width: 1px;
      }

      .feature-comparison td.quick-lint-js,
      .feature-comparison th.quick-lint-js {
        border-left-width: 1px;
        border-right-width: 1px;
      }

      .feature-comparison .footnote-marker {
        position: absolute;
      }

      .feature-comparison figcaption p {
        margin-top: 0.25em;
        margin-bottom: 0.25em;
      }

      /* Make editor logos appear close to the editor names. */
      .feature-comparison .editors th:first-child:not([colspan="2"]) {
        white-space: nowrap;
        padding-right: 0.25em;
      }
      .feature-comparison .editors th:first-child:not([colspan="2"]) + th {
        padding-left: 0.25em;
        padding-right: 1em;
      }

      /* Make the table consume less horizontal space. */
      .feature-comparison .editors tr:not(.header) th:first-child {
        font-size: 75%;
      }

      .install-options {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0;
        padding: 0;
      }
      .install-options > li {
        list-style-type: none;
        margin: 0.375rem 0.5rem;
        padding: 0;
        white-space: nowrap;
      }

      .install-options a {
        /* Color from unofficial JavaScript logo: https://github.com/voodootikigod/logo.js */
        background-color: rgb(240, 219, 79);
        border-radius: 0.5rem;
        display: inline-block;
        font-weight: bold;
        letter-spacing: 0.75px;
        padding: 0.75rem 1.25rem 0.5em 1.25rem;
        text-decoration: none;
      }
      .install-options a,
      .install-options a:visited {
        /* Color from unofficial JavaScript logo: https://github.com/voodootikigod/logo.js */
        color: rgb(50, 51, 48);
      }
      .install-options a:hover {
        /* Color from unofficial JavaScript logo: https://github.com/voodootikigod/logo.js */
        background-color: rgba(240, 219, 79, 0.75);
      }

      .install-options {
        line-height: 1.4em;
      }
      .install-logo {
        height: 1.2em;
        width: 1.2em;
        vertical-align: text-bottom;
      }

      .plugin-logo {
        height: 1.2em;
        width: 1.2em;
        vertical-align: text-bottom;
      }
      .logo-with-text {
        white-space: nowrap;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>quick-lint-js</h1>
      <p class="tag-line">quick-lint-js finds bugs in JavaScript programs.</p>
      <%- await include("./common-nav.ejs.html") %>
    </header>

    <main>
      <p>
        <a href="benchmarks/"><strong>200× faster</strong> than ESLint</a>,
        quick-lint-js gives you <strong>instant feedback</strong> as you code.
        <strong>Find bugs</strong> in your JavaScript before your finger leaves
        the keyboard. Lint any JavaScript file with
        <strong>no configuration</strong>.
      </p>

      <p><a href="demo/">Try it out in your browser.</a></p>

      <figure>
        <object data="vscode-demo.webp" type="image/webp" style="width: 100%">
          <video autoplay loop poster="vscode-demo.png" style="width: 100%">
            <source src="vscode-demo.mp4" type="video/mp4" />
            <img
              src="vscode-demo.png"
              style="width: 100%"
              alt="quick-lint-js running in Visual Studio Code"
            />
          </video>
        </object>
      </figure>

      <h2>Install quick-lint-js</h2>
      <p>
        Latest version: 0.3.0 (beta) (released
        <time datetime="2021-07-02">July 2, 2021</time>)
      </p>

      <ul class="install-options">
        <li>
          <a href="install/#install-vim"
            ><img
              class="install-logo"
              src="vim.gif"
              alt=""
              aria-labelledby="install-vim"
            />
            <span id="install-vim">install Vim plugin</span></a
          >
        </li>
        <li>
          <a
            href="https://marketplace.visualstudio.com/items?itemName=quick-lint.quick-lint-js"
            ><img
              class="install-logo"
              src="vscode.png"
              alt=""
              aria-labelledby="install-vs-code"
            />
            <span id="install-vs-code">install VS Code plugin</span></a
          >
        </li>
        <li>
          <a href="install/#install-cli"
            ><img
              class="install-logo"
              src="gnome-terminal.svg"
              alt=""
              aria-labelledby="install-cli"
            />
            <span id="install-cli">install CLI</span></a
          >
        </li>
        <li>
          <a href="https://www.npmjs.com/package/quick-lint-js"
            ><img
              class="install-logo"
              src="npm.svg"
              alt=""
              aria-labelledby="install-npm"
            />
            <span id="install-npm">install CLI on npm</span></a
          >
        </li>
      </ul>
      <p><a href="install/">see all installation options</a></p>

      <h2 id="linter-feature-comparison">Features</h2>
      <figure class="comparison feature-comparison">
        <table>
          <thead>
            <tr class="header">
              <th colspan="2">feature</th>
              <th class="quick-lint-js">quick-lint-js</th>
              <th><a href="https://eslint.org/">ESLint</a></th>
              <th><a href="https://jshint.com/">JSHint</a></th>
              <th><a href="https://rslint.org/">RSLint</a></th>
              <th><a href="https://deno.land/">Deno</a></th>
              <th><a href="https://rome.tools/">Rome</a></th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th colspan="2"><a href="benchmarks/">speed</a></th>
              <td class="good quick-lint-js">
                <span aria-labelledby="feature-speed-qljs-quick">🚀</span
                ><br /><span id="feature-speed-qljs-quick">quick</span>
              </td>
              <td class="meh">
                <span aria-labelledby="feature-speed-eslint-capable">🐇</span
                ><br /><span id="feature-speed-eslint-capable">capable</span>
              </td>
              <td class="bad">
                <span aria-labelledby="feature-speed-jshint-slow">🐢</span
                ><br /><span id="feature-speed-jshint-slow">slow</span>
              </td>
              <td class="meh">
                <span aria-labelledby="feature-speed-rslint-capable">🐇</span
                ><br /><span id="feature-speed-rslint-capable">capable</span>
              </td>
              <td class="bad">
                <span aria-labelledby="feature-speed-deno-lint-slow">🐢</span
                ><br /><span id="feature-speed-deno-lint-slow">slow</span>
              </td>
              <td class="bad">
                <span aria-labelledby="feature-speed-rome-slow">🐢</span
                ><br /><span id="feature-speed-rome-slow">slow</span>
              </td>
            </tr>
            <tr>
              <th colspan="2">license</th>
              <td class="good quick-lint-js">free<br />GPLv3</td>
              <td class="meh">open source<br />MIT</td>
              <td class="meh">open source<br />MIT</td>
              <td class="meh">open source<br />MIT</td>
              <td class="meh">open source<br />MIT</td>
              <td class="meh">open source<br />MIT</td>
            </tr>
            <tr>
              <th colspan="2">easy npm install</th>
              <td class="good quick-lint-js">
                <span aria-label="easy">✅</span>
              </td>
              <td class="good"><span aria-label="easy">✅</span></td>
              <td class="good"><span aria-label="easy">✅</span></td>
              <td class="bad">
                <span aria-label="hard">❌</span
                ><span
                  aria-label="planned"
                  title="planned"
                  class="footnote-marker"
                  >&nbsp;<a
                    href="https://old.reddit.com/r/javascript/comments/j4zj3c/rslint_an_extremely_fast_javascript_linter/g7r46mp/?context=1"
                    >*</a
                  ></span
                >
              </td>
              <td class="bad"><span aria-label="hard">❌</span></td>
              <td class="good"><span aria-label="easy">✅</span></td>
            </tr>
            <tr>
              <th colspan="2">easy setup</th>
              <td class="good quick-lint-js">
                <span aria-label="easy">✅</span><br />zero config
              </td>
              <td class="meh">
                <span aria-label="hard">❌</span><br />config or
                <code>init</code>
              </td>
              <td class="bad"><span aria-label="hard">❌</span><br />config</td>
              <td class="good">
                <span aria-label="easy">✅</span><br />config optional
              </td>
              <td class="good">
                <span aria-label="easy">✅</span><br />zero config
              </td>
              <td class="meh">
                <span aria-label="hard">❌</span><br />config or
                <code>init</code>
              </td>
            </tr>
            <tr>
              <th colspan="2">JSX</th>
              <td class="bad quick-lint-js">
                <span aria-label="no">❌</span
                ><span
                  aria-label="planned"
                  title="planned"
                  class="footnote-marker"
                  >&nbsp;*</span
                >
              </td>
              <td class="meh">
                <span aria-label="yes">✅</span
                ><span
                  aria-label="with plugin"
                  title="with plugin"
                  class="footnote-marker"
                  >&nbsp;†</span
                >
              </td>
              <td class="bad"><span aria-label="no">❌</span></td>
              <td class="bad">
                <span aria-label="no">❌</span
                ><span
                  aria-label="planned"
                  title="planned"
                  class="footnote-marker"
                  >&nbsp;*</span
                >
              </td>
              <td class="good"><span aria-label="yes">✅</span></td>
              <td class="good"><span aria-label="yes">✅</span></td>
            </tr>
            <tr>
              <th colspan="2">TypeScript</th>
              <td class="bad quick-lint-js">
                <span aria-label="no">❌</span
                ><span
                  aria-label="planned"
                  title="planned"
                  class="footnote-marker"
                  >&nbsp;*</span
                >
              </td>
              <td class="meh">
                <span aria-label="yes">✅</span
                ><span
                  aria-label="with plugin"
                  title="with plugin"
                  class="footnote-marker"
                  >&nbsp;<a href="https://typescript-eslint.io/">†</a></span
                >
              </td>
              <td class="bad"><span aria-label="no">❌</span></td>
              <td class="bad">
                <span aria-label="no">❌</span
                ><span
                  aria-label="planned"
                  title="planned"
                  class="footnote-marker"
                  >&nbsp;*</span
                >
              </td>
              <td class="good"><span aria-label="yes">✅</span></td>
              <td class="good"><span aria-label="yes">✅</span></td>
            </tr>

            <tr>
              <th colspan="2">lint rules</th>
              <td class="meh quick-lint-js"><a href="errors/">minimal</a></td>
              <td class="good">
                <a href="https://eslint.org/docs/rules/">zillions</a>
              </td>
              <td class="meh">
                <a href="https://jshint.com/docs/options/">some</a>
              </td>
              <td class="meh">
                <a href="https://rslint.org/rules/">some</a>
              </td>
              <td class="meh"><a href="https://lint.deno.land/">some</a></td>
              <td class="meh">
                <a href="https://rome.tools/docs/lint/rules/">some</a>
              </td>
            </tr>
            <tr>
              <th colspan="2">stable</th>
              <td class="bad quick-lint-js">
                <span aria-label="unstable">❌</span>
              </td>
              <td class="good"><span aria-label="stable">✅</span></td>
              <td class="good"><span aria-label="stable">✅</span></td>
              <td class="bad"><span aria-label="unstable">❌</span></td>
              <td class="good"><span aria-label="stable">✅</span></td>
              <td class="bad"><span aria-label="unstable">❌</span></td>
            </tr>
          </tbody>

          <tbody class="editors">
            <tr class="header">
              <th colspan="2">feature</th>
              <th class="quick-lint-js">quick-lint-js</th>
              <th><a href="https://eslint.org/">ESLint</a></th>
              <th><a href="https://jshint.com/">JSHint</a></th>
              <th><a href="https://rslint.org/">RSLint</a></th>
              <th><a href="https://deno.land/">Deno</a></th>
              <th><a href="https://rome.tools/">Rome</a></th>
            </tr>
            <tr>
              <th>VS Code</th>
              <th><img class="plugin-logo" src="vscode.png" alt="" /></th>
              <td class="good quick-lint-js">
                <span aria-label="yes">✅</span>
              </td>
              <td class="good"><span aria-label="yes">✅</span></td>
              <td class="good"><span aria-label="yes">✅</span></td>
              <td class="good"><span aria-label="yes">✅</span></td>
              <td class="good"><span aria-label="yes">✅</span></td>
              <td class="good"><span aria-label="yes">✅</span></td>
            </tr>
            <tr>
              <th>Vim</th>
              <th><img class="plugin-logo" src="vim.gif" alt="" /></th>
              <td class="good quick-lint-js">
                <span aria-label="yes">✅</span>
              </td>
              <td class="good"><span aria-label="yes">✅</span></td>
              <td class="good"><span aria-label="yes">✅</span></td>
              <td class="bad"><span aria-label="no">❌</span></td>
              <td class="good"><span aria-label="yes">✅</span></td>
              <td class="good"><span aria-label="yes">✅</span></td>
            </tr>
            <tr>
              <th>WebStorm</th>
              <th><img class="plugin-logo" src="webstorm.svg" alt="" /></th>
              <td class="bad quick-lint-js"><span aria-label="no">❌</span></td>
              <td class="good"><span aria-label="yes">✅</span></td>
              <td class="good"><span aria-label="yes">✅</span></td>
              <td class="bad"><span aria-label="no">❌</span></td>
              <td class="good"><span aria-label="yes">✅</span></td>
              <td class="bad"><span aria-label="no">❌</span></td>
            </tr>
            <tr>
              <th>Sublime Text</th>
              <th><img class="plugin-logo" src="sublime-text.svg" alt="" /></th>
              <td class="bad quick-lint-js">
                <span aria-label="no">❌</span
                ><span
                  aria-label="planned"
                  title="planned"
                  class="footnote-marker"
                  >&nbsp;*</span
                >
              </td>
              <td class="good"><span aria-label="yes">✅</span></td>
              <td class="good"><span aria-label="yes">✅</span></td>
              <td class="bad"><span aria-label="no">❌</span></td>
              <td class="good"><span aria-label="yes">✅</span></td>
              <td class="bad"><span aria-label="no">❌</span></td>
            </tr>
            <tr>
              <th>Notepad++</th>
              <th>
                <img class="plugin-logo" src="notepad-plus-plus.svg" alt="" />
              </th>

              <td class="bad quick-lint-js"><span aria-label="no">❌</span></td>
              <td class="good"><span aria-label="yes">✅</span></td>
              <td class="good"><span aria-label="yes">✅</span></td>
              <td class="bad"><span aria-label="no">❌</span></td>
              <td class="bad"><span aria-label="no">❌</span></td>
              <td class="bad"><span aria-label="no">❌</span></td>
            </tr>
            <tr>
              <th>Atom</th>
              <th><img class="plugin-logo" src="atom.svg" alt="" /></th>
              <td class="bad quick-lint-js"><span aria-label="no">❌</span></td>
              <td class="good"><span aria-label="yes">✅</span></td>
              <td class="good"><span aria-label="yes">✅</span></td>
              <td class="bad"><span aria-label="no">❌</span></td>
              <td class="good"><span aria-label="yes">✅</span></td>
              <td class="bad"><span aria-label="no">❌</span></td>
            </tr>
            <tr>
              <th>Emacs</th>
              <th><img class="plugin-logo" src="emacs.svg" alt="" /></th>
              <td class="good quick-lint-js">
                <span aria-label="yes">✅</span>
              </td>
              <td class="good"><span aria-label="yes">✅</span></td>
              <td class="good"><span aria-label="yes">✅</span></td>
              <td class="bad"><span aria-label="no">❌</span></td>
              <td class="good"><span aria-label="yes">✅</span></td>
              <td class="bad"><span aria-label="no">❌</span></td>
            </tr>
            <tr>
              <th colspan="2">LSP server</th>
              <td class="good quick-lint-js">
                <span aria-label="yes">✅</span>
              </td>
              <td class="good"><span aria-label="yes">✅</span></td>
              <td class="bad"><span aria-label="no">❌</span></td>
              <td class="good"><span aria-label="yes">✅</span></td>
              <td class="good"><span aria-label="yes">✅</span></td>
              <td class="bad"><span aria-label="no">❌</span></td>
            </tr>
          </tbody>
        </table>
        <figcaption>
          <p id="footnote-planned">
            <span aria-label="planned footnote">*</span> feature is planned
          </p>
          <p id="footnote-with-plugin">
            <span aria-label="planned with plugin">†</span> feature requires a
            plugin
          </p>
        </figcaption>
      </figure>
    </main>

    <footer><%- await include("./common-footer-nav.ejs.html") %></footer>
  </body>
</html>

<!--
quick-lint-js finds bugs in JavaScript programs.
Copyright (C) 2020  Matthew "strager" Glazar

This file is part of quick-lint-js.

quick-lint-js is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

quick-lint-js is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with quick-lint-js.  If not, see <https://www.gnu.org/licenses/>.
-->
<!--
Other files may have different copyright and may be licensed under different
licenses. See license/ for details.
-->
